<!DOCTYPE html>
<html>
<head>
<title>Mamule</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

<style type="text/css">
	nav ul.nav a.brand{
		text-transform: uppercase;
		font-weight: 700;
	}
	
	nav li span.hello{
		color: #777777;
	    float: none;
	    padding: 10px 15px;
	    text-decoration: none;
	    text-shadow: 0 1px 0 #FFFFFF;
	    display:block;
	}

	body{
		padding-top:60px;
	}

</style>
</head>
<body>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="navbar-inner">
  <div class="container">
			<ul class="nav">
			  <li class="active">
			    <a class="brand" href="#dashboard">mamule</a>
			  </li>
			</ul>
			<ul class="nav nav-pills" data-bind="foreach:views">
			    <li data-bind="css: {active: $root.currentView() == $data}"> 
			        <a  data-bind="text:$data, attr:{href:'#' + $data}"></a>
			    </li>
			</ul>
			<ul class="nav pull-right">
				<li data-bind="visible: username()"><span class="hello">Welcome back, <span data-bind="text: username(), click: function() { $('#userdata').modal('show'); }"></span></span></li>
				<li data-bind="visible: username()"><a href="javascript:mvm.logout();">logout</a></li>
				<li data-bind="visible: !username()"><a href="javascript:mvm.beginLogin();">login</a></li>
			</ul>
	</div>
</div>
</nav>

<div class="container">
    <div class="row">

            <div data-bind="template: {name: currentView()}"></div>
        
    </div>
</div>

<script type="text/html" id="dashboard">
	<div class="span12">
    <div>
	<h2>Dashboard</h2>
	<div id="orders-container">
    <table class="table table-striped">
        <tr>
        	<th style="width: 1px;"></th>
        	<th class="hide">orderid</th>
        	<th><b>Order</b></th>
			<th><b>Mails</b></th>
        	<th><b>Options</b></th>
        </tr>
        <tbody data-bind="foreach:orders">
        <tr>
            <td>
                <span data-bind="visible: transient()" class="label label-default">Transient</span>
				<span data-bind="visible: confirmed()" class="label label-success">Confirmed</span>
            </td>
        	<td class="hide">
            	<b data-bind="html: id"></b>
        	</td>
            <td>
                <p><b data-bind="html: title"></b></p>
	 		</td>
			 <td>
				<p data-bind="html: body"></p>
            </td>

            <td>
            	<button class="btn" data-bind="click: $parent.showOrderDetails">Details</button>
                <button class="btn" data-bind="visible: !confirmed(), click: $parent.confirmOrder">Confirm</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>

    </div>
    </div>
</script>

<script type="text/html" id="write">
	<div class="span8">
    <div>
    <h2>write an mail</h2>
     <form name="sentMail" class="well clearfix" id="contactForm" novalidate>
               <legend>recipient</legend>
                 <div class="control-group">
                 	<div class="controls">
                        <input data-bind="value: r_company" type="text" class="form-control" 
                                      placeholder="company" id="r_company"
                                   data-validation-required-message="Please enter your company name" />
                          <span class="help-inline"></span>
                   
                        <input data-bind="value: r_forename" type="text" class="form-control" 
                                      placeholder="forename" id="r_forename" required
                                   data-validation-required-message="Please enter your forename" />
                          <span class="help-inline"></span>
                   
                        <input data-bind="value: r_surname" type="text" class="form-control" 
                                      placeholder="surname" id="r_surname" required
                                   data-validation-required-message="Please enter your surname" />
                          <span class="help-inline"></span>
                   </div>
                   <div class="controls">
                        <input data-bind="value: r_street" type="text" class="form-control" 
                                      placeholder="street" id="r_street"
                                   data-validation-required-message="Please enter your street name" />
                          <span class="help-inline"></span>
                   
                        <input data-bind="value: r_postal" type="text" class="form-control" 
                                      placeholder="postal" id="r_postal" required
                                   data-validation-required-message="Please enter your postal" />
                          <span class="help-inline"></span>
                   
                        <input data-bind="value: r_city" type="text" class="form-control" 
                                      placeholder="city" id="r_city" required
                                   data-validation-required-message="Please enter your city" />
                          <span class="help-inline"></span>
                   </div>
					<div class="controls">
                   		<button class="btn btn-info" data-bind="click: function() { mvm.addRecipient(); }">Add</button><br />
                 	</div>
                 </div>         
   
				<legend>message</legend>                          
                <div class="control-group">
                 <div class="controls">
                                 <textarea rows="15" cols="400" class="form-control" 
                       placeholder="Message" id="message" required
                       data-validation-required-message="Please enter your message" minlength="5" 
                       data-validation-minlength-message="Min 5 characters" 
                        maxlength="999" style="resize:none; width:90%;"></textarea>
                </div>
               </div>                  
             <div id="success"> </div> <!-- For success/fail messages -->
             <div class="control-group">
                 <div class="controls">
            	<button type="submit" class="btn btn-primary" data-bind="click: function() { mvm.sendMail(); }">Send</button><br />
            	</div>
            </div>
          </form>    
    </div>
    </div>
    <div class="span4">
    	<div class="well panel panel-default">
		  <div class="panel-heading">
		    <h3 class="panel-title">Recipients</h3>
		  </div>
		  <div class="panel-body">
		    <table class="table">
	    	<tbody data-bind="foreach: recipients">
	    		<td>
	    			<span data-bind="text: forename"></span>
	    			<span data-bind="text: surname"></span>
	    		</td>
	    		<td>
	    			<span data-bind="click: $parent.removeRecipient" class="btn btn-danger remove_fields"><i class="icon-trash icon-white"></i> remove</span>
	    		</td>
	    	</tbody>
	    	</table>
	    	<div id="recipients-list"></div>
		  </div>
		</div>
    	<div class="well panel panel-default">
		  <div class="panel-heading">
		    <h3 class="panel-title">Price</h3>
		  </div>
		  <div class="panel-body">
		    <p>your order totals to:</p>
	    	<p data-bind="text: current_order_price"></p>
		  </div>
		</div>

    </div>
</script>

<script type="text/html" id="contact">
    <div>
    <h2>Contact</h2>
    <form class="well span8">
	  <div class="row">
			<div class="span3">
				<label>First Name</label>
				<input type="text" class="span3" placeholder="Your First Name">
				<label>Last Name</label>
				<input type="text" class="span3" placeholder="Your Last Name">
				<label>Email Address</label>
				<input type="text" class="span3" placeholder="Your email address">
				<label>Subject
				<select id="subject" name="subject" class="span3">
					<option value="na" selected="">Choose One:</option>
					<option value="service">General Customer Service</option>
					<option value="suggestions">Suggestions</option>
					<option value="product">Product Support</option>
				</select>
				</label>
			</div>
			<div class="span5">
				<label>Message</label>
				<textarea name="message" id="message" class="input-xlarge span5" rows="10"></textarea>
			</div>
		
			<button type="submit" class="btn btn-primary pull-right">Send</button>
		</div>
	</form>
    </div>
    <div class="row">
    <div class="span12">
		<h2>Imprint</h2>
		<div class="csc-default well" id="c892">
			<p>Responsible for this website is:</p>
			<p>Mamule Inc<br>Chranidikt Tibrotl<br>Waehringerstrasse 29<br>1090 Wien<br> Österreich</p>
			<p>E-Mail: <a class="mail" href="mailto:info@mamule.com">info@mamule.com</a></p>
			<p>USt.-Nr.: AT80154444376<br><br></p>
			<p>Special thanks to our mothers.</p>
		</div>
	</div>
    </div>
</script>

<script type="text/html" id="prices">
    <div>
    <h2>Prices</h2>
    <form class="well span8">
	  <div class="row">
			<div class="span8">
			 <table class="table table-hover">
		  			<tr>
		  				<td>Zone 1</td>
		  				<td>in EUR</td>
		  				<td data-bind="visible: admin()">
		  					<div class="control-group">
                 				<div class="controls">
                        			<input data-bind="value: price_zone1" type="text" class="form-control" 
                                      	placeholder="Price Zone 1" id="price_zone1"
                                  		data-validation-required-message="Please enter a price" />
                          			<span class="help-inline"></span>
                   				</div>
                   			</div> 
                   		</td>
                   		<td data-bind="visible: !admin(), text: price_zone1"></td>
		  			</tr>
		  			<tr>
		  				<td>Zone 2</td>
		  				<td>in EUR</td>	
		  				<td data-bind="visible: admin()">
		  					<div class="control-group">
                 				<div class="controls">
                        			<input data-bind="value: price_zone2" type="text" class="form-control" 
                                      	placeholder="Price Zone 2" id="price_zone2"
                                  		data-validation-required-message="Please enter a price" />
                          			<span class="help-inline"></span>
                   				</div>
                   			</div> 
                   		</td>
                   		<td data-bind="visible: !admin(), text: price_zone2"></td>
		  			</tr>
		  			<tr>
		  				<td>Zone 3</td>
		  				<td>in EUR</td>	
		  				<td data-bind="visible: admin()">
		  					<div class="control-group">
                 				<div class="controls">
                        			<input data-bind="value: price_zone3" type="text" class="form-control" 
                                      	placeholder="Price Zone 3" id="price_zone3"
                                  		data-validation-required-message="Please enter a price" />
                          			<span class="help-inline"></span>
                   				</div>
                   			</div> 
                   		</td>
                   		<td data-bind="visible: !admin(), text: price_zone3	"></td>		  			</tr>
	  			</table>
			</div>
			<button type="submit" data-bind="visible: admin(), click:function(){ mvm.updatePrices(); }" class="btn btn-primary pull-right">Update</button>
		</div>
	</form>
    </div>
</script>

<div id="login" class="modal hide fade" tabindex="1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
    <div class="modal-header">
        <h3 id="loginLabel">Sign In</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputUsername">Username</label>
                <div class="controls">
                    <input data-bind="value: username" type="text" id="inputUsername" placeholder="Username">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input data-bind="value: password" type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button data-bind="click: function() { mvm.login(); }" class="btn btn-primary" id="loginbutton" data-dismiss="modal" aria-hidden="true">Sign In</button>
        <button data-bind="click: function() { mvm.register(); }" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Register</button>
    
    </div>
</div> <!-- / login -->

<div id="userdata" class="modal hide fade" tabindex="1" role="dialog" aria-labelledby="userLabel" aria-hidden="true">
    <div class="modal-header">
        <h3 id="userLabel">Your Data</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputForename">Forename</label>
                <div class="controls">
                    <input data-bind="value: forename" type="text" id="inputForename" placeholder="Name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputSurname">Surname</label>
                <div class="controls">
                    <input data-bind="value: surname" type="text" id="inputSurname" placeholder="Name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputStreet">Street</label>
                <div class="controls">
                    <input data-bind="value: street" type="text" id="inputStreet" placeholder="Street">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCity">City</label>
                <div class="controls">
                    <input data-bind="value: city" type="text" id="inputCity" placeholder="City">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPostal">Postal</label>
                <div class="controls">
                    <input data-bind="value: postal" type="text" id="inputPostal" placeholder="Postal">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button data-bind="click: function() { mvm.updateUser(); }" class="btn btn-primary" id="updateuserbutton" data-dismiss="modal" aria-hidden="true">Update</button>
    
    </div>
</div> <!-- / userdata -->

<div id="orderdetails" class="modal hide fade" tabindex="1" role="dialog" aria-labelledby="orderLabel" aria-hidden="true">
    <div class="modal-header">
        <h3 id="orderLabel">Order Details</h3>
    </div>
    <div class="modal-body">
    	<h4>Order</h4>
        <table class="table table-hover">
  			<tr>
  				<td>Orderid</td>
  				<td id="val_orderid"></td>
  			</tr>
  			<tr>
  				<td>Date</td>
  				<td id="val_orderdate"></td>
  			</tr>
  			<tr>
  				<td>State</td>
  				<td id="val_orderstate"></td>
  			</tr>
  			<tr>
  				<td>Price</td>
  				<td id="val_orderprice"></td>
  			</tr>
  		</table>
  		<h4>Mails</h4>
  		<table class="table table-hover" id="mails">
  			<tr>
  				<td>Text</td>
  				<td id="val_mailtext"></td>
  			</tr>
  			<tr>
  				<td>Receivers</td>
  				<td id="val_mailreceivers"></td>
  			</tr>
  		</table>
    </div>
    <div class="modal-footer">
        <button data-bind="click: function() { $('#orderdetails').modal('hide'); }" class="btn btn-primary" id="updateuserbutton" data-dismiss="modal" aria-hidden="true">Close</button>
    
    </div>
</div> <!-- / orderdetails -->


<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="scripts/sammy/lib/sammy.js" type="text/javascript" charset="utf-8"></script>	
<script src="scripts/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>	
<script src="index.js" type="text/javascript" charset="utf-8"></script>	

<script type="text/javascript">

	var mvm = new MamuleViewModel();
	ko.applyBindings( mvm );
	mvm.loadSession();

	//ok this one's kinda trashy
	$( "#login" ).keydown(function( e ) {
		if ( e.which == 13 )
		{
			//used to update the focused input field
			$('input').blur();
			$("#loginbutton").click();
		}
	});

	var app =Sammy(function () {
	    this.get('#:view', function () {
	        mvm.currentView(this.params.view);
	    });
	})
	app.raise_errors = true;
	app.run('#dashboard');

</script>
</body>
</html>